<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <script src="./jQuery.js"></script>
    <script src="./js.js"></script>
    <title>轮播图</title>
    <style type="text/css">
*{
    padding:0px;
    margin:0px;
    border:0px;
}
li{
    list-style-type:none;
}
a{
    text-decoration:none;
}
#wrapper{
    margin:0px auto;
    border:0px;
    padding:0px;
}
#show-area{
    width:961px;
    height:450px;
    position:relative;
    margin:0px auto;
    overflow:hidden;
}
#show-area ul{
    position:relative;
    width:4800px;
    height:450px;
    right:0;
}
#show-area ul li{
    float:left;
    width:455px;
}



</style>
</head>
<body>
    <div id="wrapper">
        <div id="arrLeft" title="下一张"></div>
        <div id="arrRight" title="上一张"></div>
        <div id="show-area">
           
           <ul class="sol_ul">
           
              <li class="sol_1">
                  <div class="sol_left">
                      <img src="./yaoshi_1.png">
                  </div>
                  <div class="sol_right">
                      <p>
                          <img src="./yaoshi_1a.png">
                      </p>
                      <br>
                      <h2>全国执业药师资格考试用书</h2>
                      <dd>
                          <a>注册试听免费课程</a>
                      </dd>
                      <dt>
                        <a class="dt_a1">电子教案下载</a>
                        <a class="dt_a2">在线购买</a>
                        <a class="dt_a3">讲义下载</a>
                      </dt>
                  </div>
              </li>
              <li class="sol_2">
                  <div class="sol_left">
                      <img src="./yaoshi_2.png">
                  </div>
                  <div class="sol_right">
                      <p>
                          <img src="./yaoshi_2a.png">
                      </p>
                      <br>
                      <h2>全国执业药师资格考试用书</h2>
                      <dd>
                          <a>注册试听免费课程</a>
                      </dd>
                      <dt>
                          <a class="dt_a1">电子教案下载</a>
                          <a class="dt_a2">在线购买</a>
                          <a class="dt_a3">讲义下载</a>
                      </dt>
                  </div>
              </li>
              <li class="sol_3">
                  <div class="sol_left">
                      <img src="./yaoshi_3.png">
                  </div>
                  <div class="sol_right">
                      <p>
                          <img src="./yaoshi_3a.png">
                      </p>
                      <br>
                      <h2>全国执业药师资格考试用书</h2>
                      <dd>
                          <a>注册试听免费课程</a>
                      </dd>
                      <dt>
                        <a class="dt_a1">电子教案下载</a>
                        <a class="dt_a2">在线购买</a>
                        <a class="dt_a3">讲义下载</a>
                      </dt>
                  </div>
              </li>
              <li class="sol_4">
                  <div class="sol_left">
                      <img src="./yaoshi_4.png">
                  </div>
                  <div class="sol_right">
                      <p>
                          <img src="./yaoshi_4a.png">
                      </p>
                      <br>
                      <h2>全国执业药师资格考试用书</h2>
                      <dd>
                          <a>注册试听免费课程</a>
                      </dd>
                      <dt>
                        <a class="dt_a1">电子教案下载</a>
                        <a class="dt_a2">在线购买</a>
                        <a class="dt_a3">讲义下载</a>
                      </dt>
                  </div>
              </li>
             
           </ul>
           
            
            
        </div> 
      </div>
<script type="text/javascript">
$(function(){
   var i = 0;
   var imgWidth = $("#show-area ul li").width();
   
   var clone = $("#show-area ul li").first().clone();
   $("#show-area ul").append(clone);
   //复制第一张图片并且添加到最后达到无缝连接的效果
   
   var size = $("#show-area ul li").size();//得到所有li的个数
   
   $("arrLeft").click(function(){
      Toleft();
      
   })
   
   
   //右按钮
   $("arrRight").click(function(){
      Toright();
      
   })
   $("#show-area ul").hover(function(){
     clearInterval(timer);
     
   },function(){
      timer = setInterval(function(){
     Toleft();    
       
   },3000)     
       
   })
   
   //两个方向按钮鼠标移出移入事件
//    $("#button-left,#button-right").mouseover(function(){
//        clearInterval(timer);
       
//    }).mouseout(function(){
//      timer = setInterval(function(){
//         Toleft();    
       
//      },3000)    
//    })
   

   //定时器
   var timer = setInterval(function(){
     Toleft();    
       
   },3000)   
   function Toleft(){
     i++;
     if(i==size){
        $("#show-area ul").css({left:0});
        i = 1;     
     }
     $("#show-area ul").stop().animate({left:-i*imgWidth},1000);
     
    //  if(i == size -1){
    //     $("#controler div").eq(0).addClass("onclick").siblings().removeClass("onclick"); 
           
    //  }else{
    //    $("#controler div").eq(i).addClass("onclick").siblings().removeClass("onclick");      
           
    // }

   }

   function Toright(){
      i--;
      if(i==-1){
         $("#show-area ul").css({left:-(size - 1)*imgWidth});
         i=size-2;    
          
      }   
      $("#show-area ul").animate({left:-i*imgWidth},1000);  
    //   $("#controler div").eq(i).addClass("onclick").siblings().removeClass("onclick"); 
       
   }
   
   
   
});



    </script>
</body>
</html>